<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/header.css">
	<style>
		.status-view {
			display: flex;
		}

		.status-view .item {
			width: 189px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			background-image: url('./img/status-bg.png');
			background-size: 189px 48px;
			background-repeat: no-repeat;
			background-position: 0 0;
			/* active-status-bg.png */
			flex: 1;
			font-family: Microsoft YaHei;
			font-weight: bold;
			font-size: 16px;
			color: #878E9A;

		}

		.status-view .active {

			background-image: url('./img/active-status-bg.png');
			background-size: 200px 59px;
			color: #FFFFFF;

		}


		.status-view .item span {
			display: inline-block;
			width: 18px;
			height: 18px;
			line-height: 18px;
			background: #FFFFFF;
			border-radius: 50%;
			margin-right: 6px;
		}

		.status-view .active span {
			color: #1A8DDB;
		}

		.status-view .item:last-child {
			background-image: url('./img/status-lastbg.png');

		}

		.form-view {
			padding: 15px;
		}

		.form-view .item {
			display: flex;
			align-items: center;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 15px;
			color: #081735;

			margin: 10px;
		}

		.form-view .item span {
			width: 100px;
			text-align: right;
			font-size: 15px;
			color: #878E9A;
		}

		.form-view .checkbox {
			margin: 0;
		}

		.form-view .checkbox label {
			margin-right: 49px;
		}

		.form-view .checkbox input {
			width: 15px;
			height: 15px;
		}
	</style>
</head>

<body>
	<div class="header">
		<div class="header-container-place"></div>
		<div class="header-container">
			<div class="header-nav">
				<div class="header-logo">
					<img class="logo-img" src="./img/header-logo.png" alt="">
					<!-- <span class="logo-text">工商银行声誉风控管理平台</span> -->
				</div>
				<div class="navs">
					<div>
						<a href="" class="item active">
							<img src="./img/icon-zl.png" alt="">
							<div>总览</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-fxts.png" alt="">
							<div>风险提示</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-jrzx.png" alt="">
							<div>今日资讯</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-yqyj.png" alt="">
							<div>舆情预警</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-yqjb.png" alt="">
							<div>舆情简报</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-scgl.png" alt="">
							<div>舆情智库</div>
						</a>
					</div>
					<div>
						<a href="" class="item">
							<img src="./img/icon-scgl.png" alt="">
							<div>收藏管理</div>
						</a>
					</div>
					<div class="btn-group">
						<a href="" class="item dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="false">
							<img src="./img/icon-xtgl.png" alt="">
							<div>系统管理<img class="bottom-icon" src="./img/bottom-icon.png" alt=""></div>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">企业基本信息</a></li>
							<li><a href="#">个人基本信息</a></li>
							<li><a href="#">分行管理</a></li>
							<li><a href="#">支行管理</a></li>
							<li><a href="#">角色管理</a></li>
							<li><a href="#">员工管理</a></li>
						</ul>
					</div>
				</div>
				<div class="btn-group">
					<div class="user-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
						aria-expanded="false" data-hover="dropdown">
						<div class="user-head">
							<img src="./img/user-head.png" alt="">
						</div>
						<div class="name">诸葛亮
							<img class="icon-arrow" src="./img/bottom-icon.png" alt="">
						</div>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#">个人中心</a></li>
						<li><a href="#">退出</a></li>
					</ul>
				</div>
			</div>
			<div class="breadcrumb-view">
				<div class="current-path">当前位置：<span><img width="16" height="16" src="./img/icon-home.png" alt="">总览</span>
				</div>
				<div class="history-list">
					<div>风险提示 <img src="./img/icon-close.png" class="icon-close" alt=""></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-view">
		<div class="search-view">
			<form class="navbar-form navbar-left">
				<div class="form-group">
					<span>媒体名称：</span>
					<input type="text" class="form-control" placeholder="Search">
				</div>
				<div class="form-group">
					<span>媒体类别：</span>
					<select class="form-control">
						<option>选项 1</option>
						<option>选项 2</option>
						<option>选项 3</option>
						<option>选项 4</option>
					</select>
				</div>
				<button class="btn btn-primary">搜索</button>
			</form>
		</div>
		<h4 class="title">媒体库</h4>
		<div class="table-view">
			<table class="table">
				<thead class="thead">
					<tr>
						<th class="num">序号</th>
						<th>媒体名称</th>
						<th>媒体级别</th>
						<th>分类</th>
						<th>网址/ID</th>
						<th>主办单位</th>
						<th>注册地</th>
						<th>新闻资质</th>
						<th>操作</th>
					</tr>
				</thead>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
					<td>666</td>
					<td>6766</td>
					<td>666</td>
					<td class="operate">
						<div class="button toggleCollect" data-row="1" data-toggle="modal" data-target="#myModal">
							<img src="./img/unCollect.png" alt="">
							<span>收藏</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
					<td>666</td>
					<td>6766</td>
					<td>666</td>
					<td class="operate">
						<div class="button toggleCollect" data-row="1" data-toggle="modal" data-target="#myModal">
							<img src="./img/unCollect.png" alt="">
							<span>收藏</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
					<td>666</td>
					<td>6766</td>
					<td>666</td>
					<td class="operate">
						<div class="button toggleCollect" data-row="1" data-toggle="modal" data-target="#myModal">
							<img src="./img/unCollect.png" alt="">
							<span>收藏</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
					<td>666</td>
					<td>6766</td>
					<td>666</td>
					<td class="operate">
						<div class="button toggleCollect" data-row="1" data-toggle="modal" data-target="#myModal">
							<img src="./img/unCollect.png" alt="">
							<span>收藏</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
					<td>666</td>
					<td>6766</td>
					<td>666</td>
					<td class="operate">
						<div class="button toggleCollect" data-row="1" data-toggle="modal" data-target="#myModal">
							<img src="./img/unCollect.png" alt="">
							<span>收藏</span>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="page-view">
			<div class="left">显示第 <span>1</span>到第 <span>5</span> 条记录，总共 <span class="total">340</span> 条记录</div>
			<div class="right">
				<ul class="pagination">
					<li>
						<a href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li>
						<a href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="inputs">
				跳至<input type="text" class="page-input form-control" placeholder="">页
			</div>
		</div>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-body">
					<div class="status-view">
						<div class="item active">
							<span>1</span>待分办
						</div>
						<div class="item">
							<span>2</span>待反馈
						</div>
						<div class="item">
							<span>3</span>待评分
						</div>
						<div class="item">
							<span>4</span>已完结
						</div>
					</div>
					<div class="form-view">
						<div class="item">
							<span>标题：</span>
							<div>众多权威媒体积极</div>
						</div>
						<div class="item">
							<span>来源：</span>
							<div>证券日报</div>
						</div>
						<div class="item">
							<span>原文作者：</span>
							<div>运营商财</div>
						</div>
						<div class="item">
							<span>原文链接：</span>
							<div>https://www.toutiao.com/</div>
						</div>
						<div class="item">
							<span>风险等级：</span>
							<div>1</div>
						</div>
						<div class="item">
							<span>分办单位：</span>
							<div class="checkbox">
								<label>
									<input type="checkbox" value="">
									中关村支行
								</label><label>
									<input type="checkbox" value="">
									朝阳门支行
								</label><label>
									<input type="checkbox" value="">
									大望路支行
								</label><label>
									<input type="checkbox" value="">
									亚运村支行
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default cancel-btn" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary confirm-btn">发布</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
	/**
	 * 鼠标划过就展开子菜单，免得需要点击才能展开
	 */
	function dropdownOpen () {

		var $dropdownLi = $('li.dropdown');

		$dropdownLi.mouseover(function () {
			$(this).addClass('open');
		}).mouseout(function () {
			$(this).removeClass('open');
		});
	}

	$(document).ready(function () {
		$(document).off('click.bs.dropdown.data-api');
		dropdownOpen();//调用
	});
	$('.operate').on("click", '.toggleCollect', function (e) {
		console.log("收藏", e)
	})
</script>

</html>